<template>
  <div>
    <el-upload
      action="/upload"
      :on-change="uploadFile"
      :before-remove="removeFile"
      accept=".jpg,.jpeg,.png*"
      multiple
      :show-file-list="true"
      :file-list="fileList"
      list-type="picture"
      :auto-upload="false"
    >
      <el-button>+ 上传附件</el-button>
    </el-upload>
    <el-button @click="save">保存</el-button>
  </div>
</template>

<script>
import { uploadImg } from '@/api/upload'
export default {
  name: 'upload',
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    // 附件上传
    uploadFile (file, fileList) {
      const isJPG = file.raw.type === 'image/jpeg'
      const isPNG = file.raw.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        fileList.splice(-1, 1)
        this.$message.error('附件只能为JPG/PNG格式！')
        return
      }
      if (!isLt2M) {
        fileList.splice(-1, 1)
        this.$message.error('附件大小不能超过2MB！')
        return
      }
      this.fileList.push({ url: file.url, file: file })
    },
    // 移除附件
    removeFile (file, fileList) {
      this.fileList = fileList
    },
    // 保存附件
    save () {
      let formData = new FormData()
      formData.append('name', 'test')
      this.fileList.forEach((item) => {
        formData.append('files', item.file.raw)
      })
      uploadImg(formData).then(res => {

      }).catch(e => {
        this.$message.error(`error:${e.message}`)
      })
    }
  }
}
</script>
